Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 | 1x 1x 1x 1x 1x 1x 5x 5x 5x 5x | import { RootState } from "../../redux/store" import { useSelector } from "react-redux" import { useRouter } from "next/router" import Head from "next/head" import React from "react" import LeftArrowIcon from "../../components/icons/LeftArrowIcon" const GameDetail = () => { const router = useRouter() const onGoBack = () => router.back() const { name, provider, tags } = useSelector((state: RootState) => state.game) return ( <div id="carouselExampleCaptionsFull" className="fade-in carousel slide carousel-fade relative h-screen" data-bs-ride="carousel" > <Head> <title>Game Detail</title> <meta name="viewport" content="initial-scale=1.0, width=device-width" /> <meta name="description" content="Game Detail" /> </Head> <div className="carousel-inner relative w-full overflow-hidden h-screen"> <div className="carousel-item active relative float-left w-full h-screen bg-no-repeat bg-cover bg-center"> <video data-testid="video" className="min-w-full min-h-full xl:min-w-0 xl:min-h-0" playsInline autoPlay muted loop > <source className="" src="/vid4.mp4" type="video/mp4" /> </video> <div className="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed" style={{ backgroundColor: "rgba(0, 0, 0, 0.6)" }} > <div className="flex justify-center items-center h-full"> <div className="text-white text-center px-14 px-md-0 bg-black opacity-60 p-10 rounded-xl border"> <h2 className="text-3xl font-semibold mb-4"> {name || "Game Name"} </h2> <div className="text-md mb-6">Provided by: {provider}</div> <div className="md:space-x-2"> <button title="Back to games" onClick={onGoBack} type="button" className="inline-flex items-center px-6 py-2 border-2 border-white text-white font-medium text-xs leading-tight uppercase rounded hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 transition duration-150 ease-in-out hover:shadow-lg hover:shadow-gray-500" role="button" data-mdb-ripple="true" data-mdb-ripple-color="light" > <LeftArrowIcon classes="left-btn" /> Back To Games </button> </div> </div> </div> </div> </div> <div className="carousel-item relative float-left w-full h-screen bg-no-repeat bg-cover bg-center"> <video data-testid="video" className="min-w-full min-h-full xl:min-w-0 xl:min-h-0" playsInline autoPlay muted loop > <source className="" src="/vid2.mp4" type="video/mp4" /> </video> <div className="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed" style={{ backgroundColor: "rgba(0, 0, 0, 0.3)" }} > <div className="flex justify-center items-center h-full"> <div className="text-white text-center px-14 px-md-0 w-[600px] bg-black opacity-60 p-10 rounded-xl border"> <h2 className="text-3xl font-semibold mb-4">Tags</h2> <div className="text-md mb-6"> {tags?.toLocaleString().replace(/,/g, " - ")} </div> <div className="md:space-x-2"> <button onClick={onGoBack} type="button" className="inline-flex items-center px-6 py-2 border-2 border-white text-white font-medium text-xs leading-tight uppercase rounded hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 transition duration-150 ease-in-out hover:shadow-lg hover:shadow-gray-500" role="button" data-mdb-ripple="true" data-mdb-ripple-color="light" > <LeftArrowIcon classes="left-btn" /> Back To Games </button> </div> </div> </div> </div> </div> </div> <button className="carousel-control-prev absolute top-0 bottom-0 flex items-center justify-center p-0 text-center border-0 hover:outline-none hover:no-underline focus:outline-none focus:no-underline left-0" type="button" data-bs-target="#carouselExampleCaptionsFull" data-bs-slide="prev" > <span className="carousel-control-prev-icon inline-block bg-no-repeat" aria-hidden="true" ></span> <span className="visually-hidden">Previous</span> </button> <button className="carousel-control-next absolute top-0 bottom-0 flex items-center justify-center p-0 text-center border-0 hover:outline-none hover:no-underline focus:outline-none focus:no-underline right-0" type="button" data-bs-target="#carouselExampleCaptionsFull" data-bs-slide="next" > <span className="carousel-control-next-icon inline-block bg-no-repeat" aria-hidden="true" ></span> <span className="visually-hidden">Next</span> </button> </div> ) } export default GameDetail |